<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"/>
    <title>幸运翻牌</title>
    <link rel="stylesheet" href="../common/css/normalize.css">
    <link rel="stylesheet" href="../common/css/common.min.css">
    <link rel="stylesheet" href="../common/css/iconfont.css">
    <link rel="stylesheet" href="css/luckyCard.min.css">
</head>
<body>
	<div id="fanzhuan">
	    <div class="flip-container" >
	        <div  class="flipper" v-for="item in flop.prizeList" :class="{fan:item.fan}" @click="fanpai(item)" >
	            <div class="front"  >
	                <img src="img/front.png" alt="">
	            </div>
		        <!--没中奖显示默认图片 ,中奖显示中奖图片, 切换背景图-->
	            <div class="back" v-if="!item.img">
					<img  src="img/no_prize_bg.png" alt="">
	            </div>
		        <div class="back" v-else>
					<img  src="img/back.png" alt="">
	                <img class="prize-img"  v-bind:src="item.img" alt="">
	            </div>
	        </div>

	    </div>
		<div class="fz15 mt20 chance text-center" >
                    (你还有<span>1</span>次召唤机会)
                </div>
        <div class="footer">
            <a href="../common/prize.html">我的奖品</a>
            <span>|</span>
            <a href="../common/rule.html">活动规则</a>
        </div>
		<div class="toast" v-show="flop.isShow">
	            <div class="bg"></div>
	            <div class="con text-center">
	                <div class="win" v-if="flop.win" >
	                    <div class="prize prize-step2" v-show="flop.prizeItem">
		                    <div class="fz22 gongxi">恭喜你! </div>
		                    <p class="prize-name">获得kindle一台</p>
		                    <img class="prize-img" src="../common/img/prize.jpg" alt="" >
		                    <p class="hui666 prize-name">有效期：2018/03/25-2018/04/25</p>
		                    <a href="../common/getPrize.html" class="btn btn-red" >兑奖</a>
		                    <div class="close">
		                        <i class="iconfont icon-close" @click="flop.close()"></i>
		                    </div>
	                     </div>
	                </div>
		            <div class="win" v-else>
			            <div class="prize prize-lose">
		                    <p class="hui666">加油, 差一点就中了!</p>
		                    <a class="btn btn-blue" @click="flop.again()">再来一次</a>
	                    </div>
		            </div>
	            </div>
	        </div>
	</div>
	<script src="../common/js/common.js"></script>
	<script src="../common/lib/vue.min.js"></script>

	<script>
		const fanzhuan = new Vue({
			el: '#fanzhuan',
			data: {
			    flop:flop,
			},
			methods:{
			    //翻转卡片
                fanpai:function  (e) {
                    const that = this

                    if(that.flop.clickNum) {
                        e.fan = 1 //为1执行翻牌效果
                        that.flop.clickNum = 0  //点击一次就不能再点了

                        //有图片就说明中奖
                        if(e.img){
                            setTimeout( function() {
                                that.flop.showPrize()
                            },2000)
                        }else{
//	                    没中奖
                            setTimeout( function() {
                                that.flop.prizeNo()
                            },2000)
                        }

                        //点击后1.5秒翻牌
                        setTimeout(function () {
                            for (let x of that.flop.prizeList) {
                                x.fan = 1
                            }
                        }, 1500)
                    }


                },

			}

		})
	</script>
</body>
</html>